<template>
    <div id="inputQueryItem">
        <div class="inputDiv"><input class="searchInput" :placeholder="placeholder" v-model="queryText" @keyup.enter="dataQuery"/><span class="searchButton" @click="dataQuery"></span></div>
        <div class="totalDiv"><span>本次查询共有符合条件的数据<span>{{totalCount}}</span>条</span></div>
    </div>
</template>

<script type="text/javascript">
export default {
    props: ['totalCount','placeholder'],
    data (){
        return{
            queryText:''
        }
    },
    methods: {
        dataQuery() {
            this.$emit("dataQuery",this.queryText);
        }
    }
}
</script>

<style scoped>
#inputQueryItem{
    width: 100%;
    height: 75px;
}
div.inputDiv{
    float: left;
    width: 50%;
    text-align: right;
}
div.totalDiv{
    float: left;
    width: 50%;
    text-align: left;
}
.searchInput{
    width: 200px;
	height: 30px;
	background-color: #ffffff;
	border-radius: 3px;
	border: 1px solid #b3b3b3;
    padding-left: 10px;
    
}
.searchButton{
    background-image: url(../assets/images/iconfont-sousuoHome.svg);
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: -22px;
    margin-top: 6px;
}
.searchButton:hover{
    background-size: 22px 22px;
    width: 22px;
    height: 22px;
    margin-left: -24px;
}
div.totalDiv>span{
    font-size: 18px;
	color: #333333;
    height: 30px;
    line-height: 30px;
    margin-left: 20px;
}
div.totalDiv>span>span{
    color: #ee0c0c;
    margin: 10px;
}

</style>
